import React, { PureComponent } from 'react'
import { withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'
import { Toast } from 'antd-mobile'
import Tag from '@/components/Tag'
import ShareSheet from '@/components/ShareSheet'
import css from './content.module.scss'
class ArticleContent extends PureComponent {
    contentRef = React.createRef()
    shareRef = React.createRef()

    static propTypes = {
        info: PropTypes.object,
        content: PropTypes.string,
        tags: PropTypes.array
    }

    state = {
        hasScroll: true,
        enableShare: false,
        shareUrl: window.location.href
    }

    countHeight = () => {
        const current = this.contentRef.current
        this.setState({
            hasScroll: current.scrollHeight > current.clientHeight
        })
    }

    showMore = () => {
        this.setState({
            hasScroll: false
        })
    }

    handleContent = (e) => {
        const { target: { dataset } } = e
        if (dataset.bvid) {
          this.props.history.push(`/video/${dataset.bvid}`)
        }
    }

    handleTag = tag => {
        this.props.history.push(`/tag/${tag.id}`)
    }

    showToast = () => {
        Toast.info('功能待开发', 3)
    }

    handleShare = () => {
        this.shareRef.current.show()
    }
    
    componentDidMount() {
        this.countHeight()
    }

    componentDidUpdate(prevProps) {
        if (prevProps.content !== this.props.content) {
            this.countHeight()
        }
    }

    render() {
        const { hasScroll, shareUrl } = this.state
        const { content, tags, info } = this.props
        return (
            <div ref={this.contentRef} className={`${css["wrap"]} ${hasScroll ? css['limit'] : ''}`}>
                { hasScroll && <div className={css["load-more"]}>
                        <div className="arrow-content" onClick={this.showMore}>
                            <span>继续阅读全文</span>
                            <i className="fa fa-dropdown"></i>
                        </div>
                    </div>
                }
                {
                    content && <div
                        className={css["article-content"]}
                        dangerouslySetInnerHTML={{__html: content}}
                        onClick={this.handleContent}      
                    ></div>
                }

                {
                    tags.length > 0 && <ul className={css["tags-wrap"]}>
                        {
                            tags.map(item => {
                                return <li key={item.id} className="tag-item">
                                    <Tag
                                        className="vtag"
                                        round
                                        onClick={() => this.handleTag(item)}
                                    >
                                        { item.name }
                                    </Tag>
                                </li>
                            })
                        }
                    </ul>
                }  

                <div className={css["toolbar"]}>
                    <div className={css["toolbar-item"]} onClick={this.showToast}>
                        <i className="fa fa-heart"></i>
                        <span>{info.stats.favorite}</span>
                    </div>
                    <div className={css["toolbar-item"]} onClick={this.showToast}>
                        <i className="fa fa-nice"></i>
                        <span>{info.stats.like}</span>
                    </div>
                    <div className={css["toolbar-item"]} onClick={this.handleShare}>
                        <i className="fa fa-share"></i>
                        <span>{info.stats.share}</span>
                    </div>
                </div>
                <ShareSheet ref={this.shareRef} url={shareUrl} title={info.title} pic={info.banner_url} />
                
            </div>
        )
    }
}
export default withRouter(ArticleContent)